<template>
	<view class="popup w100 h100" v-if="show" @click="close">
		<view class="pop_box w100" @click.stop="!close">
			<view class="header_img_name flex">
				<view class="goods_img_box" @click="see">
					<image class="w100 h100" src="../static/good1.png" mode=""></image>
				</view>
				<view class="money_yx">
					<view class="money_txt s40 f500 family">
						￥288
					</view>
					<view class="yx_txt s24 fblod familytow"
						v-if="goodsDetail.statOneTxt != '' || goodsDetail.statTwoTxt != ''">
						【已选】{{goodsDetail.statOneTxt}},{{goodsDetail.statTwoTxt}},数量{{goodsDetail.goodsNum}}
					</view>
				</view>
				<view class="close" @click="close">
					<image class="w100 h100" src="../pages/filePages/static/close.png" mode=""></image>
				</view>
			</view>
			<view class="state_top">
				<view class="state_top_title s28 fblod familytow">
					型号
				</view>
				<view class="state_top_box flex">
					<view
						:class="[goodsStateId == item.id ? 'state_top_list_active' : 'state_top_list','s28', 'family', 'f500','txtali']"
						v-for="(item,index) in goodsState" :key="item.id" @click="onGoods(item.id,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="state_top" style="margin-top: 10upx;">
				<view class="state_top_title s28 fblod familytow">
					型号
				</view>
				<view class="state_top_box flex">
					<view
						:class="[goodsStateTwoId == item.id ? 'state_top_list_active' : 'state_top_list','s28', 'family', 'f500','txtali']"
						v-for="(item,index) in goodsStateTwo" :key="item.id" @click="onGoodsTwo(item.id,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="goods_num flex">
				<view class="goods_num_title s28 familytow fblod">
					数量
				</view>
				<view class="zen_jan flex">
					<view class="jan_box" @click="goodsNumJian">
						<view class="jan"></view>
					</view>
					<view class="num_txt s28 fblod familytow">
						{{goodsDetail.goodsNum}}
					</view>
					<view class="jia_box s40 fblod txtali" @click="goodsNumJia">
						+
					</view>
				</view>
			</view>
			<view class="bottom_btn s36 f500 family txtali" @click="close">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "popUp",
		props: {
			show: {
				default: true,
				type: Boolean
			},
			goodsState: {
				default: [],
				type: Array
			},
			goodsStateTwo: {
				default: [],
				type: Array
			},
			type: {
				default: null,
				type: Number
			}
		},
		data() {
			return {
				goodsStateId: "",
				goodsStateTwoId: '',
				goodsDetail: {
					statTwoTxt: '',
					goodsNum: 1,
					statOneTxt: '',
				}
			}
		},
		created() {

		},
		methods: {
			see() {
				uni.previewImage({
					urls: ['../static/good1.png'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏', '识别二维码'],
						success: function(data) {
							return false
						},
						fail: function(err) {
							return false
						}
					}
				});
			},
			goodsNumJian() {
				if (this.goodsDetail.goodsNum == 1) {
					uni.showToast({
						title: "最少购买一件!",
						icon: 'none'
					})
				} else {
					this.goodsDetail.goodsNum--
				}
			},
			goodsNumJia() {
				this.goodsDetail.goodsNum++
			},
			onGoods(id, ind) {
				this.goodsStateId = id
				this.goodsDetail.statOneTxt = this.goodsState[ind].name
			},
			onGoodsTwo(id, ind) {
				this.goodsStateTwoId = id
				this.goodsDetail.statTwoTxt = this.goodsStateTwo[ind].name
			},
			close() {
				this.$emit('GoodsDetail', this.goodsDetail)
				let that = this.goodsDetail
				if (this.type == 1) {
					return false
				} else {
					return false
				}
				this.$parent.close()
				this.goodsStateId = ''
				this.goodsStateTwoId = ''
				that.statTwoTxt = ''
				that.statOneTxt = ''
				that.goodsNum = 1
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		overflow: hidden;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);

		.pop_box {
			height: 992upx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			animation: move .2s 0s linear normal;

			.header_img_name {
				margin-left: 24upx;

				.goods_img_box {
					width: 208upx;
					height: 208upx;
					margin-top: -60upx;
					border-radius: 8upx 8upx 8upx 8upx;
					overflow: hidden;
				}

				.money_yx {
					margin-left: 34upx;
					margin-top: 30upx;

					.money_txt {
						color: #E4493A;
					}

					.yx_txt {
						width: 350upx;
						color: #666666;
						margin-top: 4upx;
					}
				}

				.close {
					width: 60upx;
					height: 60upx;
					margin-top: 44upx;
					position: absolute;
					right: 24upx;
				}
			}

			.state_top {
				margin-left: 20upx;
				margin-top: 52upx;

				.state_top_title {
					color: #333333;
				}

				.state_top_box {
					margin-top: 24upx;
					flex-wrap: wrap;

					.state_top_list {
						width: 204upx;
						height: 68upx;
						background: rgba(0, 0, 0, 0.1);
						border-radius: 8upx 8upx 8upx 8upx;
						line-height: 68upx;
						color: #666666;
						margin-right: 28upx;
						margin-bottom: 28upx;
					}

					.state_top_list_active {
						width: 204upx;
						height: 68upx;
						background: #EBBE87;
						border-radius: 8upx 8upx 8upx 8upx;
						line-height: 68upx;
						color: #FFFFFF;
						margin-right: 28upx;
						margin-bottom: 28upx;
					}
				}
			}

			.goods_num {
				margin-top: 28upx;
				margin-left: 20upx;

				.goods_num_title {
					color: #333333;
				}

				.zen_jan {
					margin-left: 516upx;

					.jan_box {
						width: 40upx;
						height: 40upx;
						background: rgba(0, 0, 0, 0.06);
						border-radius: 8upx 8upx 8upx 8upx;

						.jan {
							width: 20upx;
							height: 4upx;
							background-color: #999999;
							margin: 50% auto;
						}
					}

					.num_txt {
						color: #000000;
						margin: 0 20upx 0 20upx;
					}

					.jia_box {
						width: 40upx;
						height: 40upx;
						background: #EBBE87;
						border-radius: 8upx 8upx 8upx 8upx;
						color: #FFFFFF;
						line-height: 36upx;
					}
				}
			}

			.bottom_btn {
				width: 568upx;
				height: 80upx;
				background: #EBBE87;
				border-radius: 40upx 40upx 40upx 40upx;
				border: 2upx solid #EBBE87;
				margin: 76upx auto;
				line-height: 80upx;
				color: #FFFFFF;
			}
		}

		@keyframes move {
			from {
				height: 0upx;
			}

			to {
				height: 992upx;
			}
		}
	}
</style>
